<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            height: 100vh;
            margin: 0px;
        }

        main {
            height: 100vh;
            display: grid;
            grid-template-rows: 90px 50px auto 40px;
            grid-template-columns: 200px auto 150px;
            grid-template-areas: "header1 header1 header1" "header2 header2 header2" "nav section aside" "footer footer footer"
        }

        #header1,
        #header2,
        #aside,
        #article,
        #nav,
        #section,
        #footer {
            border: 1px #ccc solid;
        }

        #header1 {
            grid-area: header1;
        }

        #header2 {
            grid-area: header2;
        }

        #article {
            grid-area: article
        }

        #nav {
            grid-area: nav
        }

        #section {
            grid-area: section
        }

        #footer {
            grid-area: footer
        }

        #aside {
            grid-area: aside
        }
    </style>
</head>

<body>
    <main>
        <header id="header1">
            <h1>log</h1>
        </header>
        <header id="header2">
            <ul>
                <li></li>

            </ul>
        </header>
        <nav id="nav">选项</nav>
        <section id="section">主页</section>
        <aside id="aside">登陆</aside>
        <footer id="footer">说明</footer>
    </main>
</body>

</html>